<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递公司</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/wuliuguanli/kuaidigongsi.js"></script>
    <script src="../../javaScript/"></script>
    <style>
        body {
            background-color: #F2F2F2;
        }

        .container {
            width: 1670px;
            margin-top: 20px;
            background-color: white;
        }

        .drop_down {
            width: 250px;
            height: 40px;
            outline: none #F2F2F2;
        }

        .sousuo,
        .chongzhi {
            border: none;
            height: 40px;
            line-height: 40px;
            width: 80px;
            text-align: center;
            border-radius: 4px;

        }

        .sousuo {
            background-color: #0099FF;
            color: white;
        }

        #head>div:nth-child(1) {
            margin: 20px 0;
        }

        .icon-shujukuliebiao {
            font-size: 15px;
            height: 60px;
            line-height: 60px;
            padding-left: 25px;

        }

        #Tbody a {
            color: black;
            text-decoration: none;
        }

        .table thead {
            background-color: #F2F2F2;
        }

        /* .table>thead>tr>th{
            height: 60px;
            line-height: 60px;
        }
        .table>thead>tr>th:nth-child(1){
            height: 62px;
            line-height: 62px;
        } */
        #kuangjia {
            width: 600px;
            height: 500px;
            background-color: #F6F6F6;
            /* background-color: grey; */
            /* margin-left: -10px; */
            position: relative;
        }

        ul {
            list-style: none;
            width: 80px;
            height: 500px;
            background-color: #F6F6F6;
            margin-left: 30px;
            padding-top: 30px;
        }

        ul li {
            width: 120px;
            height: 50px;
            line-height: 50px;
            margin-left: -30px;
            /* background-color: green; */
            cursor: pointer;
        }

        ul li span {
            margin-left: 30px;
        }

        .kuangjia_centent1 {
            width: 480px;
            background-color: white;
            height: 500px;
            position: absolute;
            top: 0;
            left: 120px;
        }

        img {
            width: 350px;
            margin-left: 50px;
            margin-top: 50px;
        }

        .kuangjia_centent2 {
            width: 480px;
            background-color: white;
            height: 500px;
            position: absolute;
            top: 0;
            left: 120px;
            display: none;
        }

        .kuangjia_centent2>div:nth-child(1) {
            margin-top: 50px;
        }

        .kuangjia_centent2>div>span {
            color: red;
        }

        .kuangjia_centent2>div {
            width: 400px;
            text-align: right;
            margin-bottom: 10px;
        }

        .kuangjia_centent3 {
            width: 480px;
            background-color: white;
            height: 500px;
            position: absolute;
            top: 0;
            left: 120px;
            display: none;
        }

        .Ipunt {
            width: 250px;
            height: 30px;
            padding: 0;
            margin: 0;
            border: 0;
            outline: grey 1px solid;
        }

        .kuangjia_centent3>div:nth-child(1)>span {
            color: red;
        }

        .kuangjia_centent3>div {
            width: 400px;
            text-align: right;
            margin-bottom: 10px;
        }

        .kuangjia_centent3>div:nth-child(1) {
            margin-top: 50px;
        }

        .anniu button {
            width: 100px;
            height: 40px;
            line-height: 40px;
            margin-top: 20px;
            border: none;
            outline: rgb(243, 240, 240) 1px solid;
        }

        .anniu>button:nth-child(1) {
            background-color: #33ADFF;
            outline: none;
            color: white;
        }

        .anniu>button:nth-child(2) {
            margin-right: 46px;
            background-color: white;
        }

        #ulone {
            background-color: white;
        }

        .modal-body {
            padding: 0;
            width: 600px;
        }

        .modal-header {
            width: 600px;
        }

        .btn-primary {
            background-color: white;
            color: black;
            border: none;
            font-size: 14px;
            padding: 0;
        }

        .btn-primary:hover {
            background-color: #F5F5F5;
            color: black;
        }

        .quanxuan {
            padding-left: 8px;
            height: 34px;
            line-height: 34px;
            font-size: 15px;
        }

        .quanxuan>span {
            text-align: justify;
            margin-left: 10px;
            font-size: 15px;
        }

        #xiala {
            height: 34px;
            line-height: 34px;
        }

        #xiala>select {
            border: none;
            background-color: #F2F2F2;
            width: 80px;
            /* font-size: 12px; */
            text-align: center;
        }

        #xiala>select>option {
            border: none;
            background-color: #0099FF;
            width: 80px;
            /* font-size: 12px; */
            text-align: center;
            /* margin-top: 10px; */
        }

        .pagination {
            width: 100%;
            height: 0;
            margin-top: -20px;
        }
    </style>
</head>

<body>
    <div id="head" class="container">
        <div class="row">
            <div class="col-md-9 col-xs-9">
                <div class="col-md-4 col-xs-4">
                    当前状态
                    <select class="drop_down drop_down_one">
                        <option value="">请选择当前状态</option>
                        <option value="已开通">已开通</option>
                        <option value="未开通">未开通</option>
                    </select>
                </div>
                <div class="col-md-4 col-xs-4">
                    客服电话&nbsp;<input type="text" placeholder="客服电话" class="drop_down  drop_down_two">
                </div>
                <div class="col-md-4 col-xs-4">
                    企业名称&nbsp;<input type="text" placeholder="企业名称" class="drop_down drop_down_three">
                </div>
            </div>
            <div class="col-md-2 col-xs-2 col-md-offset-1">
                <button class="sousuo"><span class="iconfont icon-sousuo ">搜索</span></button>
                <button class="chongzhi"><span class="iconfont icon-shuaxin">重置</span></button>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <span class="iconfont icon-shujukuliebiao">数据列表</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>序号</th>
                            <th>企业名称</th>
                            <th>客服电话</th>
                            <th>官网地址</th>
                            <th>操作</th>
                            <th>查看详情</th>
                        </tr>
                    </thead>
                    <tbody id="Tbody">

                    </tbody>
                </table>
            </div>
            <div class="col-md-12 col-xs-12">
                <div class="quanxuan col-md-1 col-xs-1">
                    <input type="checkbox">
                    <span>全选</span>
                </div>
                <div class="col-md-5 col-xs-5 col-md-offset-5">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">

                        </ul>
                    </nav>
                </div>
                <div id="xiala" class="col-md-1 col-xs-1">
                    <select>
                        <option value="">10条/页</option>
                        <option value="1">15条/页</option>
                        <option value="2">20条/页</option>
                        <option value="3">25条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <script>
        let pagingData = wuliuarr
        function showTable(data) {
            console.log(data)
            for (let i = 0; i < data.length; i++) {
                $('#Tbody').append(`
                <tr>
                    <td><input type="checkbox"></td>
                    <td>${data[i].xuhhao}</td>
                    <td>${data[i].name}</td>
                    <td>${data[i].dianhua}</td>
                    <td><a href="${data[i].wangzhi}">${data[i].wangzhi}</a></td>
                    <td>
                        <!-- <span>申请开通 </span>-->
                        <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                                    申请开通
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">${data[i].name}</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div id="kuangjia">
                                            <ul>
                                                <li id="ulone"><span>菜鸟</span> </li>
                                                <li id="ultwo"><span>网点</span> </li>
                                                <li id="ulthree"><span>京东</span> </li>
                                            </ul>
                                            <div class="kuangjia_centent1">
                                                <div><img src="../../lib/img/cainiao.png" alt=""></div>
                                            </div>
                                            <div class="kuangjia_centent2">
                                                <div>
                                                    <span>*</span>商家编码&nbsp;<input type="text" name="" id="" placeholder="输入商家编码" class="Ipunt">
                                                </div>
                                                <div>
                                                    <span>*</span>检验字段&nbsp;<input type="text" name="" id="" placeholder="输入检验字段" class="Ipunt">
                                                </div>
                                                <div class="anniu">
                                                    <button>确定</button>
                                                    <button>取消</button>
                                                </div>
                                            </div>
                                            <div class="kuangjia_centent3">
                                                <div>
                                                    <span>*</span>商家编码&nbsp;<input type="text" name="" id="" placeholder="输入商家编码" class="Ipunt">
                                                </div>
                                                <div>
                                                    <span>*</span>账号标识&nbsp;<input type="text" name="" id="" placeholder="输入账号标识" class="Ipunt">
                                                </div>
                                                <div>
                                                    运费类型&nbsp;
                                                    <select name="" id="select" class="Ipunt">
                                                        <option value="">请选择运费类型</option>
                                                        <option value="1">全国通票</option>
                                                        <option value="2">阶梯模式</option>
                                                        <option value="3">分区模式</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    月考考核&nbsp;<input type="text" name="" id="" placeholder="输入月考考核" class="Ipunt">
                                                </div>
                                                <div>
                                                    首重价格&nbsp;<input type="text" name="" id="" placeholder="输入首重价格" class="Ipunt">
                                                </div>
                                                <div>
                                                    续重价格&nbsp;<input type="text" name="" id="" placeholder="输入续重价格" class="Ipunt">
                                                </div>
                                                <div>
                                                    代收手续费&nbsp;<input type="text" name="" id="" placeholder="输入代收手续费" class="Ipunt">
                                                </div>
                                                <div>
                                                    未完成上浮比率&nbsp;<input type="text" name="" id="" placeholder="输入未完成上浮比率" class="Ipunt">
                                                </div>
                                                <div class="anniu">
                                                    <button>确定</button>
                                                    <button>取消</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>-->
                                    </div>
                                </div>
                                </div>
                        <span>编辑</span>
                    </td>
                    <td>
                        <a href="../wuliuganli/chakanxiangqing.html"><span>查看详情</span></a>
                    </td>
                </tr>
                `)
            }
        }
        // showTable(pagingData)

        let num = 1 //初始页
        let lengthPage //最大页数
        // 渲染页数
        function showPage(data) {
            $('.pagination').html(`    <li class="prePage">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                  
                    <li class="nextPage">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>`) //每次渲染前刷新一下渲染的内容
            lengthPage = Math.ceil(data.length / 10) //lengthPage是最大页数
            if (lengthPage <= 4) {
                for (let i = 1; i <= lengthPage; i++) {
                    $('.pagination li:last-of-type').before(`
                <li class="new_page active"><a href="#">${i}</a></li>
                            `)
                }

            } else if (lengthPage > 4) {
                for (let i = 1; i <= lengthPage; i++) {
                    $('.pagination li:last-of-type').before(`
                            <li class="new_page"><a href="#">${i}</a></li>
                            `)
                }
                $('.new_page').eq(0).addClass('active')

                $('.new_page').slice(3, lengthPage - 1).css({
                    display: 'none'
                })
                $('.new_page').eq(3).after(`<li class="new_page"><a href="#">...</a></li>`)
            }

        }
        showPage(pagingData)
        let start //每一页的起始坐标
        let checkedBoole

        function paging(num, data) { // 修改每一页显示的内容
            start = (num - 1) * 10 //每一页的起始下标为页面值减1再乘5，
            let arr = data.slice(start, start + 10)
            showTable(arr)
            $('.new_page').eq(num - 1).addClass('active')
            $('.new_page').eq(num - 1).siblings().removeClass('active')

            $('.quanxuan').click(function () { //全选按钮
                if ($(this).prop('checked') == true) {
                    $(".table_content input").prop("checked", true)
                } else {
                    $(".table_content input").prop("checked", false)
                }
            })
            $('.table_content input').click(function () { //获取checked是否为选中
                console.log($("input[checkbox='false']"));
                console.log($("input[type='checkbox']"));
                if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                    $('.shanchu').click(function () {
                        console.log($("input[checked='true']"));
                    })

                } else { //未选中的时候执行这个结果
                    checkedBoole = $(this).prop('checked')
                    $('.shanchu').click(function () {
                        console.log(11111)
                    })

                }
            })
            // console.log($('.table_content input').prop('checked'));
        }
        paging(1, pagingData)
        // 点击页数跳转到对应的页数
        $('.pagination').on('click', '.new_page', function () {
            paging($(this).text(), pagingData)
            num = parseInt($(this).text())
        })
        // 点击上一页跳转的上一页
        $('.pagination').on('click', '.prePage', function () {
            num > 1 ? num-- && paging(num, pagingData) : paging(1, pagingData)
        })
        // 点击下一页跳转的下一页
        $('.pagination').on('click', '.nextPage', function () {
            num < lengthPage ? num++ && paging(num, pagingData) : paging(lengthPage, pagingData)
        })



        // 申请开通
        $('#ulone').click(function () {
            $(this).css({
                backgroundColor: 'white'
            })
            $(this).siblings().css({
                backgroundColor: '#F6F6F6'
            })
            $('.kuangjia_centent1').css({
                display: 'block'
            })
            $('.kuangjia_centent2').css({
                display: 'none'
            })
            $('.kuangjia_centent3').css({
                display: 'none'
            })
        })
        $('#ultwo').click(function () {
            $(this).css({
                backgroundColor: 'white'
            })
            $(this).siblings().css({
                backgroundColor: '#F6F6F6'
            })
            $('.kuangjia_centent2').css({
                display: 'block'
            })
            $('.kuangjia_centent1').css({
                display: 'none'
            })
            $('.kuangjia_centent3').css({
                display: 'none'
            })
        })
        $('#ulthree').click(function () {
            $(this).css({
                backgroundColor: 'white'
            })
            $(this).siblings().css({
                backgroundColor: '#F6F6F6'
            })
            $('.kuangjia_centent3').css({
                display: 'block'
            })
            $('.kuangjia_centent1').css({
                display: 'none'
            })
            $('.kuangjia_centent2').css({
                display: 'none'
            })
        })




        $('.quanxuan').click(function () { //全选按钮
            if ($(this).prop('checked') == true) {
                $("#Tbody input").prop("checked", true)
            } else {
                $("#Tbody input").prop("checked", false)
            }
        })
        $('#Tbody input').click(function () { //获取checked是否为选中
            console.log($("input[checkbox='false']"));
            console.log($("input[type='checkbox']"));
            if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                $('.shanchu').click(function () {
                    console.log($("input[checked='true']"));
                })

            } else { //未选中的时候执行这个结果
                checkedBoole = $(this).prop('checked')
                $('.shanchu').click(function () {
                    console.log(11111)
                })

            }
        })

        //获取
        let organization //获取当前状态
        $('#drop_down_one').on('click', $('option'), function () {
            organization = $(this)
        })

        let atState //获取客服电话
        $('#drop_down_two').on('focusout', $('option'), function () {
            atState = $(this)
        })

        let characterName //获取企业名称
        $('#drop_down_three').on('focusout', $('option'), function () {
            characterName = $(this)
        })

        $('.sousuo').click(function () { //查找
            pagingData = wuliuarr
            console.log(pagingData)
            let sousuoData
            if (organization != undefined) {
                sousuoData = pagingData.filter(item => item.shijian == organization.val())
                pagingData = sousuoData
            }
            if (atState != undefined) {
                sousuoData = pagingData.filter(item => item.dianhua == atState.val())
                pagingData = sousuoData
            }
            if (characterName != undefined) {
                sousuoData = pagingData.filter(item => item.name == characterName.val())
                pagingData = sousuoData
            }
            showTable(pagingData)
        })
    </script>
</body>

</html>